<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  
  
  <style type="text/css">
  
  
  
  </style>
  <script>
  if (!window.console || !console.firebug){
    var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
 
    window.console = {};
    for (var i = 0; i < names.length; ++i)
        window.console[names[i]] = function() {}
}

</script>


<body>
<div id="app">

  {{fullname}}

  </div>
  


<script>
  var vm = new Vue({
    el:'#app',
	data:{ 
	  firstname:'foo',
	  lastname:'bar',
	  fullname:'foo bar'
	},
	computed:{
	  fullname:{
	  
		set:function(newValue){
		  var names = newValue.split('')
		  this.firstname=names[0]
		  this.lastname=names[names.length-1]
		
		}
	  
	  }
	
	}
  
  })
  
vm.fullname='jone doe'
</script>




</body>
</html>